import React, { Component } from "react";
import { get_Home_Groups } from "../../utils/biz_http.js";

import { Flex, Grid } from "antd-mobile";

import "../../pages/Index/index.scss";

class Group extends Component {
  state = {
    groups: [],
  };

  componentDidMount() {
    this.getGroups();
  }

  async getGroups() {
    let res = await get_Home_Groups();
    this.setState({
      groups: res.data.body,
    });
  }

  render() {
    return (
      <div>
        <Flex>
          <Flex.Item>
            <h3>租房小组</h3>
          </Flex.Item>
          <Flex.Item style={{ textAlign: "right" }}>
            <span>更多</span>
          </Flex.Item>
        </Flex>
        <Grid
          data={this.state.groups}
          columnNum={2}
          square={false}
          hasLine={false}
          renderItem={(item) => (
            <div className="grid-item">
              <Flex justify="around">
                <div>
                  <h3>{item.title}</h3>
                  <p>{item.desc}</p>
                </div>
                <div>
                  <img
                    src={`http://157.122.54.189:9060${item.imgSrc}`}
                    alt=""
                  />
                </div>
              </Flex>
            </div>
          )}
        />
      </div>
    );
  }
}

export default Group;
